
<template>
    <div class="home-page" >
        <div class="nav"  :style="'padding-top:'+headPadding+'rpx'">
            <p class="text-center">艺考</p>
        </div>   

        <div class="banner">  
            <swiper :autoplay="true"  class="banner_swiper">
                <block v-if="bannerData.length > 0">
                    <swiper-item v-for="(item,index) in bannerData" :key="index" @click="clickBanner(item)">
                        <image-loader :src="item.img_url" image-style="width:100%; height:100%; border-radius: 10rpx;" ></image-loader>
                    </swiper-item>
                </block>
            </swiper>
        </div>

      <!-- 直播课-->
      <div class="live-lesson-box">
        <p class="title" v-if="playSubjectList.length > 0">直播课</p>
        <div class="live-lesson">
          <scroll-view scroll-x="true">
            <div class="item" v-for="(item,index) in playSubjectList" :key="index"> 
                <image-loader @click="clickSubject(item)" :src="item.img_url" image-style="width:100%; height:100%;border-radius:10rpx;" ></image-loader> 
            </div>
          </scroll-view>
        </div>
        <p class="title" v-if="recommendSubjectList.length >0">推荐课程</p>
        <div class="live-lesson">
          <scroll-view scroll-x="true">
            <div class="item" v-for="(item,index) in recommendSubjectList" :key="index"> 
                <image-loader @click="clickSubject(item)" :src="item.img_url" image-style="width:100%; height:100%;border-radius:10rpx;" ></image-loader> 
            </div>
          </scroll-view>
        </div>
      </div>

      <!-- 艺考百科-->
      <div class="art-wiki-box border-top">
        <p class="title">艺考百科</p>

        <!--热词-->
        <div class="hot-entry">
          <block v-if="topicData.length > 0">
            <p @click="clickTag(item)" v-for="(item,index) in topicData" class="item" :key="index" :class="['word'+(index) % 3,item.id == selectTagId ? 'word-active' :'']" topicId="item.id">{{item.title}}</p>
          </block>
        </div>
      </div>

      <!--信息-->
      <div class="info" v-for="(item,index) in topicArticleData" :key="index" topicArticleId="item.id">
        <!--头像-->
        <div class="head" v-if="item.user_info!=null">
            <image-loader :src="item.user_info.wx_header" image-style="width: 80rpx;height:80rpx; border-radius: 50%;" ></image-loader>
        </div>
        <!--昵称，日期-->
        <div class="info-right"  v-if="item.user_info!=null">
          <div class="name-date">
            <p class="name">{{item.user_info.nickname}}</p>
            <p class="date">{{item.create_time}}</p>
          </div>
          <!--内容-->
          <div class="content">
            <p class="content-title">{{item.content}}</p>
            <div class="content-img" v-if="item.img_json && item.img_json.length >0"> 
                  <image-loader v-for="(img,imgKey) in item.img_json" :key="imgKey" :src="img.src"  @click.stop="previewImage(item,img)"  image-style="margin:0 6rpx 8rpx 0;width:189rpx;height: 189rpx;border-radius: 8rpx;" ></image-loader> 
            </div>
            <div class="handle">
              <div class="msg" @click.stop="commentInputOpen('回复：',item)">{{item.comment_num}}</div>
              <div class="like" :class="item.user_like == 1 ? 'like-active' : ''" @click="userLikeArticle(item,index)">{{item.like_num}}</div>
            </div>
          </div>
          <!--留言-->
          <div class="comment-box" v-if="item.comments.length>0">
            <div v-for="(comment,key) in item.comments" :key="key">
            <p class="comment" @click.stop="commentInputOpen('回复'+comment.nickname+'：',comment)">
                <span class="name">{{comment.nickname}}：</span>
                {{comment.content}}
            </p>
            <p class="comment" v-for="(child,childKey) in comment.child" :key="childKey" @click.stop="commentInputOpen('回复'+comment.child[childKey].nickname+'：',comment.child[childKey])">
              <span class="name">{{child.nickname}}</span>
              回复
              <span class="name">{{child.reply_nickname}}：</span>
              {{child.content}}
            </p>
            </div>
          </div>
        </div>
      </div>
      <div class="not-data" v-if="!is_load">———— 没有数据啦 ————</div>
        <!-- 提问or写心情 -->
        <div v-if="addMenuBoxShow">
            <add-menu @addQue="addQue" @addMood="addMood"></add-menu>
        </div>
        
        <login-null v-if="loginNullShow" mode="modal" @close="closeModal"></login-null>
        <!-- 评论框 -->
        <view class="container" v-if="commentBoxShow"> 
            <view class="release">
                <textarea 
                class="text"
                placeholder-class="releaseInput" 
                fixed="true" 
                maxlength="120" 
                :show-confirm-bar="false" 
                cursor-spacing="15" 
                auto-height="true" 
                :focus="true"
                :placeholder="textPoint"
                v-model="textAreacontent"
                @blur="contentBlur" ></textarea>
                <view class="submit" auto-height="true"  @click.stop="sendComment()">发送</view>
            </view>
        </view>
        <div v-if="chargeModulShow">
            <charge-modul @close="chargeVipClose"></charge-modul>   
        </div> 
        <view v-if="webViewShow">      
            <web-view :src="bannerPageUrl"></web-view>    
        </view>
    </div>
</template>
<script>
import headBack from '@/components/head-back' 
import addMenu from '@/components/add-menu.vue' 
import loginNull from '@/components/login-null.vue' 
import chargeModul from '@/components/charge-modul.vue' 
import * as api from '@/utils/api' ;
    const app = getApp();
    export default {
        onLoad(){ 
            wx.showLoading({title:'加载中'})
            
            this.checkLoginState();
            this.getBanner();//获取首页banner
            this.getPlaySubList();//直播课程列表
            this.getRecommendSubList();//推荐课程列表
            this.getTopicList();//话题标签
            this.getTopicArticleList();//话题下文章列表
            this.chargeModulShow=true;
        },
        onShow: function () {
            this.webViewShow=false;
            let pages = getCurrentPages();//页面对象
            let prevpage = pages[pages.length - 1];
            let routerArr=prevpage.__displayReporter.showReferpagepath?prevpage.__displayReporter.showReferpagepath.split('/'):[]; 
            if(routerArr.length>0){
                let routerPage=routerArr[routerArr.length-2];
                if(routerPage=='write-mood'||routerPage=='ask-question'){
                    this.selectPage=1;
                    this.getTopicArticleList();
                }
            }
        },

        data () {
            return {
                headPadding: wx.getStorageSync('headPadding'),
                headHeight: wx.getStorageSync('headHeight'),
                chargeModulShow:false,
                bannerData: [],
                recommendSubjectList:[],
                playSubjectList:[],
                topicData:[],
                is_load:true,
                selectTagId:1,
                selectPage:1,
                topicArticleData:[],
                loginNullShow:false,
                // 评论
                commentBoxShow:false,
                textPoint:'回复',
                textAreacontent: '', 
                textComment: {}, 
                addMenuBoxShow:true,
                webViewShow:false, 
                bannerPageUrl:'',

            }
        },

        components:{
            addMenu,
            loginNull,
            chargeModul
        },
        //上拉刷新
        onReachBottom:function(){
            let vm = this;
            if(vm._data.is_load){
                vm.getTopicArticleList()
            }
        },
        methods: {
            //登录是否是否过期
            checkLoginState() {
                let vm = this;
                wx.checkSession({
                    success: function(res) {
                        console.log('登录中');
                        vm.checkOpenId();
                    },
                    fail: function(res) {
                        console.log('登录过期');
                        vm.loginWx();
                    }
                })
            },
            //获得openId
            checkOpenId() {
                let vm = this;
                if (!wx.getStorageSync('openId')) {
                    vm.loginWx();
                }else{ 
                    // vm.checkUserLogin(wx.getStorageSync('openId'));
                } 
            },
            //登录微信
            loginWx() {
                let vm = this; 
                wx.login({
                    success: function(res) { 
                        api.wxServer({ code: res.code }).then(res => { 
                            if(res.data.code==200&&res.data.data){
                                console.log(res.data.data.openid);
                                wx.setStorageSync('openId', res.data.data.openid); 
                                wx.setStorageSync('token', res.data.data.token);
                                wx.setStorageSync('is_register', res.data.data.is_register); wx.setStorageSync('userInfo', res.data.data); 
                                
                            } 
                        }).catch(res => {
                          console.log(res);
                            // wx.showToast({ icon: 'none', title: res.message })
                        });
                    }
                });
            },
            //获取首页banner
            getBanner(){
                let vm = this;
                api.fetchBanner().then(res =>{
                    if(res.status == 200) vm._data.bannerData = res.data.data;
                })
            },
            //获得直播列表
            getPlaySubList(){
                let vm =this;
                api.fetchPlaySubjectList().then(res=>{
                    if(res.status == 200)vm._data.playSubjectList = res.data.data
                })
            },
            //首页推荐课程
            getRecommendSubList(){
                let vm = this;
                api.fetchRecommendSubjectList().then(res=>{
                    if(res.data.code ==200)vm._data.recommendSubjectList = res.data.data
                })
            },
            //话题标签
            getTopicList(){
                let vm = this;
                api.topicList().then(res => {
                    if(res.status == 200){
                    vm._data.topicData = res.data.data;
                    vm._data.selectTagId = res.data.data[0].id
                    }
                })
            },
            
            //话题下文章列表
            getTopicArticleList(){
                let vm = this;
                let reqeustData = []
                if(wx.getStorageSync('is_register')==1){
                  reqeustData = {
                    "tag_id":vm._data.selectTagId,
                    "page":vm._data.selectPage,
                    "user_id":wx.getStorageSync('userInfo').id
                  }
                }else{
                  reqeustData = {
                    "tag_id":vm._data.selectTagId,
                    "page":vm._data.selectPage
                  }
                }
                //如果要判断点赞状态，必须登录参数 user_id
                api.topicArticleList(reqeustData).then(res=>{
                    if(res.data.code == 200){
                        if(vm._data.topicArticleData.length>0){
                            vm._data.topicArticleData = vm._data.topicArticleData.concat(res.data.data)
                        }else{
                            vm._data.topicArticleData = res.data.data;
                        }
                        if(res.data.data.length == 0){
                            vm._data.is_load = false;
                        }else{
                            vm._data.is_load = true;
                            vm._data.selectPage = vm._data.selectPage +1;
                        } 
                    }
                    vm.$forceUpdate();
                })
            },
            //话题下文章点赞
            userLikeArticle(item,index){
              let vm = this;
              //需要判断是否登录，必须登录
              if(wx.getStorageSync('is_register')!=1){
                    this.loginNullShow=true;
                }else{
                    api.topicArticleLike({article_id:item.id,user_id:wx.getStorageSync('userInfo').id}).then(res=>{
                        if(res.data.code == 200){
                            vm._data.topicArticleData[index].user_like = vm._data.topicArticleData[index].user_like == 0 ? 1 :0;
                            let likeNum = vm._data.topicArticleData[index].like_num;
                            vm._data.topicArticleData[index].like_num = vm._data.topicArticleData[index].user_like == 0 ? likeNum-1 :likeNum+1;
                        }
                    })
                } 
            },
            //点击banner图跳转
            clickBanner(item){ 
                if(item.is_h5==1&&item.redirect_url){
                   this.webViewShow=true;  
                   this.bannerPageUrl=item.redirect_url;
                }else{
                    // wx.navigateTo({url:'../live/main?id='+item.id+'&section_id='+item.section_id})
                }
            },
            //点击tag标签，获取下属文章分页
            clickTag(item){
                let vm = this;
                //选中tag
                vm._data.selectTagId = item.id;
                //重置page
                vm._data.selectPage = 1;
                //重置Article
                vm._data.topicArticleData = [];
                wx.showLoading({title:'加载中'})
                //选中tag下的文章列表
                vm.getTopicArticleList();
            },
            //点击课程
            clickSubject(item){
                wx.navigateTo({url:'../live/main?id='+item.id+'&section_id='+item.section_id})
            },
            //写心情
            addMood(){ 
                if(wx.getStorageSync('is_register')!=1){
                    this.loginNullShow=true;
                }else{
                    wx.navigateTo({url:'./../write-mood/main'});
                }
            },
            //提问题
            addQue(){ 
                if(wx.getStorageSync('is_register')!=1){
                    this.loginNullShow=true;
                }else{
                    wx.navigateTo({url:'./../ask-question/main'});
                }
            }, 
            //关闭登录框
            closeModal(){
                this.loginNullShow=false;
            },
            //评论打开input
            commentInputOpen(textPoint,item){
              console.log(item)
                if(wx.getStorageSync('is_register')!=1){
                    this.loginNullShow=true;
                }else{
                    this.textPoint = '';
                    this.textPoint = textPoint;
                    this.textComment = {};
                    //二级节点
                    if(item.article_id != undefined){
                        this.textComment = {
                        "pid":item.hasOwnProperty('pid') && item.pid != 0 ? item.pid : 0,
                        "node_id":item.node_id == 0 ? item.id : item.node_id,
                        "article_id":item.article_id,
                        "user_id":wx.getStorageSync('userInfo').id,
                        "reply_user_id":item.user_id,
                        "content":""
                        }
                    }else{
                    this.textComment = {
                        "pid":item.hasOwnProperty('pid') && item.pid != 0 ? item.pid : 0,
                        "node_id":0,
                        "article_id":item.id,
                        "user_id":wx.getStorageSync('userInfo').id,
                        "reply_user_id":item.user_id,
                        "content":""
                        }
                    }
                    this.commentBoxShow=true;
                    this.addMenuBoxShow=false;
                }
                
            },
            //确认发送评论
            sendComment(){
                this.textComment.content = this.textAreacontent
                console.log(this.textComment)
                this.commentBoxShow=true;
                this.addMenuBoxShow=false;
                api.addArticleComment(this.textComment).then(res=>{
                    if(res.data.code==200){
                        this._data.topicArticleData = []
                        this._data.selectPage = 1
                        this.getTopicArticleList();
                    }
                })
                this.textComment = {}
                this.textAreacontent = '';
            },
            //失去焦点时候
            contentBlur(){
                this.addMenuBoxShow=true;
                this.commentBoxShow=false;
            },
            //浏览大图
            previewImage(item,url){ 
                console.log(item,url)
                let vm = this;
                let urls = [];
                if(item.img_json)
                item.img_json.forEach((list,index)=>{ 
                    urls.push(list.src);
                });
                console.log(item);
                wx.previewImage({
                    current: url.src, // 当前显示图片的http链接
                    urls: urls // 需要预览的图片http链接列表
                })
            },
            //关闭vip分享
            chargeVipClose(){
                this.chargeModulShow=false;
            },
        }, 
    }
</script>

<style lang="scss" scoped>
  .home-page{
    width:100%;
    height:100%;
    color:#000;

    .nav{
      position: relative;
    //   padding: 10% 0 0 20rpx;
      width: 100%;
      height: 360rpx;
      color: #fff;
      box-sizing: border-box;
      overflow: hidden;
    }
    .nav:after{
      position: absolute;
      top: 0;
      left: -20%;
      width: 140%;
      height: 100%;
      content: '';
      border-radius: 0 0 50% 50%;
      background: linear-gradient(-35deg,rgba(83,142,242,1),rgba(77,106,235,1));
    }

    .banner{
        margin: 0 auto;
        margin-top: -20%;
        padding: 0 33rpx;
        width: 100%;
        height: 280rpx;
        background-color: #ffffff;
        .banner_swiper{
            height:100%;
            border-radius: 10rpx;
        }
    }

    //标题公共
    .title{
      padding: 32rpx 0;
      font-size: 36rpx;
      font-weight: bolder;
      color: #0E0E0E;
    }

    //直播课
    .live-lesson-box{
      width: 100%;
      height: auto;
      background: #ffffff;
      .title{padding:32rpx 33rpx;}
      .live-lesson{
        padding: 0 0 33rpx 31rpx;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        white-space: nowrap;

        .item{
          margin-right: 20rpx;
          width: 420rpx;
          height: 241rpx;
          background: rgba(224,252,238,1);
          border-radius: 20rpx;
          display: inline-block;
          img{width:100%;height:100%}
        }
      }
    }

    //艺考百科
    .art-wiki-box{
      background: #ffffff;
      padding: 0 33rpx;
      box-sizing: border-box;
    }

    //发布的信息
    .info{
      background: #ffffff;
      padding: 32rpx 33rpx;
      display: flex;
      align-items: stretch;
      /*justify-content: center;*/
      border-bottom: #EEEEEE solid 2rpx;

      //头像
      .head{
        margin-right: 20rpx;
        width: 80rpx;
        height: 80rpx; 
      }
      .info-right{
          width:100%;
        .name-date{
          height: 80rpx;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          .name{
            flex: 1;
            font-size: 26rpx;
            color: #4268BE;
            font-weight: 600;
          }
          .date{color: #999999;font-size: 22rpx;}
        }
        .content{
          .content-title{
            margin: 22rpx 0;
            font-size: 30rpx;
            color: #333333;
          }
          .content-img{
            display: flex;
            flex-wrap: wrap;
            // align-items: center;
            // justify-content: space-evenly; 
          }
        }
        .handle{
          margin: 32rpx 8rpx 32rpx 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 24rpx;
          color: #999999;

          .msg{
            margin-right: 54rpx;
            padding-left: 36rpx;
            background: url("../../../../static/image/xxm/comments.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }

          .like{
            padding-left: 36rpx;
            background: url("../../../../static/image/xxm/like.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }
          .like-active{
            background: url("../../../../static/image/xxm/like-active.png") center center no-repeat;
            background-size: 26rpx 24rpx;
            background-position: 0;
          }
        }
      }
    }

    //评论
    .comment-box{
        padding: 17rpx 15rpx;
        background: #F7F7F7;
        font-size: 28rpx;
        color: #333333;

        .comment{
            margin-bottom: 23rpx;
            .name{color:#4268BE;font-weight:600;}
        }
    }
  }
  

  .release{
  font-size: 14px;
  background-color: #eee;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 5px 0 5px 5px;
}
.releaseInput{
  color: #ccc;
}
.release .text{
  width: 302px;
  min-height: 17px;
  max-height: 51px;
  line-height: 17px;
  border-width: 7px 10px;
  border-style: solid;
  border-color: #fff;
  background-color: #fff;
}
.release .submit{
  color: #4F87FA;
  background: #F2F7FE;
  margin-right: 5rpx;
  width: 58px;
  max-height: 30px;
  line-height: 30px;
  text-align: center;
}
</style>
